// @import './form.scss';

::-webkit-scrollbar {
  width: 6px; /* 纵向滚动条 宽度 */
  height: 6px; /* 横向滚动条 高度 */
}
::-webkit-scrollbar-thumb {
  @apply bg-black dark:bg-white;
  opacity: 0.2;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
}
// 边角，两个滚动条交汇处
::-webkit-scrollbar-corner {
  @apply bg-white dark:bg-black;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
}
body {
  -webkit-tap-highlight-color: transparent;
}
button {
  outline: 0;
}

#app {
  position: relative;
  overflow: hidden;
}

#ttsa video {
  object-fit: cover;
}

.ios-app {
  .xmov-toast {
    top: 20%;
  }
}

.xmov-toast {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2000;
  transform: translate3d(-50%, -50%, 0);
  width: 145px;
  height: 124px;
  word-break: break-all;
  white-space: pre-wrap;
  text-align: center;
  max-width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .xmov-toast-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 12px;
    padding: 10px;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, 0.65);
  }

  .toast-icon {
    width: 27px;
    height: 27px;
    margin-bottom: 15px;
  }
}

.xmov-toast-pc {
  width: 202px;
  height: 188px;
  border-radius: 8px;

  .xmov-toast-content {
    padding: 30px 10px;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.56);
  }

  .toast-icon {
    height: 85px;
    width: 100px;
    margin-bottom: 20px;
  }
}

@mixin set-clip($value) {
  clip-path: $value;
  -webkit-clip-path: $value;
}
@mixin set-backdrop($value) {
  backdrop-filter: blur($value);
  -webkit-backdrop-filter: blur($value);
}
@mixin triangle($x, $y) {
  @keyframes triangle-top-left {
    0% {
      top: $x;
      left: $y;
      opacity: 0.2;
    }
    100% {
      top: 0;
      left: 0;
      opacity: 1;
    }
  }
  @keyframes triangle-top-right {
    0% {
      top: $x;
      right: $y;
      opacity: 0.2;
    }
    100% {
      top: 0;
      right: 0;
      opacity: 1;
    }
  }
  @keyframes triangle-bottom-left {
    0% {
      bottom: $x;
      left: $y;
      opacity: 0.2;
    }
    100% {
      bottom: 0;
      left: 0;
      opacity: 1;
    }
  }
  @keyframes triangle-bottom-right {
    0% {
      bottom: $x;
      right: $y;
      opacity: 0.2;
    }
    100% {
      bottom: 0;
      right: 0;
      opacity: 1;
    }
  }
}

.zoom-enter-active {
  transition: transform 0.6s ease;
}
.zoom-leave-active {
  transition: transform 0.3s ease;
}

.zoom-enter-from,
.zoom-leave-to {
  transform: scale(0);
}

.zoom-bottom-enter-active {
  transition: transform 0.6s ease;
}
.zoom-bottom-leave-active {
  transition: transform 0.3s ease;
}

.zoom-bottom-enter-from,
.zoom-bottom-leave-to {
  transform: perspective(100px) rotateX(20deg);
}

.scale-y-enter-active {
  transition: transform 0.6s ease;
  transform-origin: bottom;
}
.scale-y-leave-active {
  transition: transform 0.3s ease;
  transform-origin: bottom;
}
.scale-y-enter-from,
.scale-y-leave-to {
  transform: scale(0.5);
}

.translate-bottom-enter-active,
.translate-bottom-leave-active {
  transition: transform 0.6s ease;
  transform-origin: bottom;
}
.translate-bottom-enter-from,
.translate-bottom-leave-to {
  transform: translateY(100%);
}

.translate-right-enter-active,
.translate-right-leave-active {
  transition: transform 0.6s ease;
  transform-origin: right;
}
.translate-right-enter-from,
.translate-right-leave-to {
  transform: translateX(120%);
}
